<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息设置 - 喝水记录小管家</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <style>
        .setup-progress {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }
        .setup-progress::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e0e0e0;
            transform: translateY(-50%);
            z-index: 0;
        }
        .progress-step {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            color: white;
            position: relative;
            z-index: 1;
        }
        .progress-step.active {
            background-color: #007aff;
        }
        .progress-step.completed {
            background-color: #34c759;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        .radio-group {
            display: flex;
            gap: 15px;
        }
        .radio-option {
            flex: 1;
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
        }
        .radio-option.selected {
            border-color: #007aff;
            background-color: rgba(0, 122, 255, 0.1);
            color: #007aff;
        }
        .activity-level {
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .activity-level.selected {
            border-color: #007aff;
            background-color: rgba(0, 122, 255, 0.1);
        }
        .activity-title {
            font-weight: 600;
            margin-bottom: 5px;
        }
        .activity-desc {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- iOS 状态栏 -->
    <div class="ios-status-bar">
        <div class="status-bar-time">9:41</div>
        <div class="status-bar-icons">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-full"></i>
        </div>
    </div>

    <div class="content">
        <h1 class="page-title">设置您的个人信息</h1>
        <p class="mb-6 text-gray-600">我们需要一些基本信息来为您制定个性化的饮水计划</p>

        <div class="setup-progress">
            <div class="progress-step completed">1</div>
            <div class="progress-step active">2</div>
            <div class="progress-step">3</div>
        </div>

        <div class="card">
            <div class="form-group">
                <label class="form-label">性别</label>
                <div class="radio-group">
                    <div class="radio-option selected">
                        <i class="fas fa-mars mr-2"></i>男性
                    </div>
                    <div class="radio-option">
                        <i class="fas fa-venus mr-2"></i>女性
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">年龄</label>
                <input type="number" class="form-input" placeholder="请输入您的年龄" value="28">
            </div>

            <div class="form-group">
                <label class="form-label">体重 (kg)</label>
                <input type="number" class="form-input" placeholder="请输入您的体重" value="65">
            </div>

            <div class="form-group">
                <label class="form-label">身高 (cm)</label>
                <input type="number" class="form-input" placeholder="请输入您的身高" value="175">
            </div>
        </div>

        <div class="card mt-6">
            <div class="form-group">
                <label class="form-label">日常活动量</label>
                
                <div class="activity-level">
                    <div class="activity-title">轻度活动</div>
                    <div class="activity-desc">大部分时间坐着，很少运动</div>
                </div>
                
                <div class="activity-level selected">
                    <div class="activity-title">中度活动</div>
                    <div class="activity-desc">经常走动，每周运动1-3次</div>
                </div>
                
                <div class="activity-level">
                    <div class="activity-title">高度活动</div>
                    <div class="activity-desc">工作需要体力劳动或每周运动4次以上</div>
                </div>
            </div>
        </div>

        <button class="btn-primary mt-8">下一步</button>
    </div>
</body>
</html>